<template>
  <div>

    <h1>【aty-steps】 component demo</h1>
    <p>【aty-steps】 本质</p>
    <aty-row class="fd-steps-box">
      <aty-row class="fd-category">
        <aty-title level="4">1. 基础用法</aty-title>
        <aty-panel>基本用法，组件会根据current自动判断各步骤状态。</aty-panel>
        <aty-steps :current="1">
          <aty-steps-item title="已完成" content="这里是该步骤的描述信息" />
          <aty-steps-item title="进行中" content="这里是该步骤的描述信息" />
          <aty-steps-item title="待进行" content="这里是该步骤的描述信息" />
          <aty-steps-item title="待进行" content="这里是该步骤的描述信息" />
        </aty-steps>
      </aty-row>

      <aty-row class="fd-category">
        <aty-title level="4">2. 带图标的步骤条</aty-title>
        <aty-panel>通过设置step-items的icon属性可以自定义图标。</aty-panel>
        <aty-steps :current="1">
          <aty-steps-item title="注册" icon="person-add" />
          <aty-steps-item title="上传头像" icon="camera" />
          <aty-steps-item title="验证邮箱" icon="email" />
        </aty-steps>
      </aty-row>

      <aty-row class="fd-category">
        <aty-title level="4">3. 切换步骤</aty-title>

        <aty-steps :current="current">
          <aty-steps-item title="步骤1" />
          <aty-steps-item title="步骤2" />
          <aty-steps-item title="步骤3" />
          <aty-steps-item title="步骤4" />
        </aty-steps>
        <aty-divider margin-top="20px" margin-bottom="20px" />
        <aty-panel>当前正在进行第 {{current+1}} 步</aty-panel>
        <aty-button type="primary" @click="next">下一步</aty-button>
        <aty-panel>点击下一步按钮可以切换当前进度状态。</aty-panel>
      </aty-row>

      <aty-row class="fd-category">
        <aty-title level="4">4. 垂直方向</aty-title>
        <aty-panel>设置属性direction为vertical在垂直方向展示。</aty-panel>
        <aty-steps :current="2" direction="vertical">
          <aty-steps-item title="已完成" content="这里是该步骤的描述信息" />
          <aty-steps-item title="已完成" content="这里是该步骤的描述信息" />
          <aty-steps-item title="进行中" content="这里是该步骤的描述信息" />
          <aty-steps-item title="待进行" content="这里是该步骤的描述信息" />
        </aty-steps>
      </aty-row>

      <aty-row class="fd-category">
        <aty-title level="4">5. 步骤运行错误</aty-title>
        <aty-panel>设置Steps的属性status为error指定当前步骤状态。</aty-panel>
        <aty-steps :current="1" status="error">
          <aty-steps-item title="已完成" content="这里是该步骤的描述信息" />
          <aty-steps-item title="进行中" content="这里是该步骤的描述信息" />
          <aty-steps-item title="待进行" content="这里是该步骤的描述信息" />
          <aty-steps-item title="待进行" content="这里是该步骤的描述信息" />
        </aty-steps>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 仅供"5.切换步骤"demo使用
      current: 0
    }
  },
  methods: {
    // 仅供"5.切换步骤"demo使用
    next () {
      if (this.current == 3) {
        this.current = 0
      } else {
        this.current += 1
      }
    }
  }
}
</script>
<style  lang="less" type="text/less"  >
    .fd-steps-box {
            margin: 20px;
            text-align: left;

            >.aty-row {
                margin-bottom: 20px;
            }
    }
</style>
